<template>
	<div class="wrap">
		<div class="answer-bot">
			<el-table :data="tableData" style="margin-top: 10px" :header-cell-style="header" stripe>
				<el-table-column label="序号" width="60px" type="index" align="center" />
				<el-table-column
					label="用户名id"
					prop="id"
					min-width="100px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="手机号"
					min-width="120px"
					show-overflow-tooltip
					align="center"
					:formatter="row => row.mobile || '--'"
				/>
				<el-table-column
					label="反馈时间"
					min-width="160px"
					show-overflow-tooltip
					align="center"
					:formatter="row => row.create_time || '--'"
				/>
				<el-table-column label="操作" width="120" fixed="right" align="center">
					<template slot-scope="scope">
						<el-link type="primary" :underline="false" @click="$refs.details.init(scope.row)">
							详情
						</el-link>
					</template>
				</el-table-column>
			</el-table>
			<!-- <el-row type="flex" justify="center">
				<el-col :span="24" style="text-align: right">
					<Pagination
						:total="total"
						:page.sync="pageNo"
						:limit.sync="pageSize"
						scroll-el="el-main"
						@pagination="loadData"
					/>
				</el-col>
			</el-row> -->
		</div>
		<Details ref="details" />
	</div>
</template>

<script>
	import { askGetlist } from '@/api/system'
	import Pagination from '@/components/Pagination'
	import Details from './components/details-notice'
	export default {
		components: {
			Pagination,
			Details
		},
		data() {
			return {
				header: { background: '#F7F8FA', color: '#1D2129', textAlign: 'center' },
				pageNo: 1,
				pageSize: 10,
				total: 0,
				tableData: []
			}
		},
		created() {
			this.searchData()
		},
		methods: {
			// 搜索
			searchData() {
				this.pageNo = 1
				this.loadData()
			},
			// 分页
			pageChange(val) {
				this.pageNo = val
				this.loadData()
			},
			loadData() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.5)'
				})
				this.tableData = []
				askGetlist({
					p: this.pageNo,
					size: this.pageSize
				}).then(
					res => {
						this.tableData = res.data
						// this.tableData = res.data.list
						// this.total = Number(res.data.count)
						loading.close()
					},
					err => {
						loading.close()
					}
				)
			},
			seeDetails(row) {
				this.$refs.details.init(row)
			},
			changeUserStatus(item) {
				edit({
					id: item.id,
					department_id: item.department_id,
					username: item.username,
					userphone: item.userphone,
					realname: item.realname,
					use_status: item.use_status
				}).then(
					res => {
						this.$message.success('修改状态成功！')
						this.loadData()
					},
					err => {
						this.$set(item, 'use_status', item.status === '1' ? '-1' : '1')
					}
				)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		.roles-table {
			margin-top: 30px;
		}

		.tree-label {
			font-size: 14px;
			color: #606266;
			font-weight: bolder;
			padding-left: 9px;
		}

		.permission-tree {
			margin: 30px;
		}
	}

	.form {
		background: #ffffff;
		padding: 24px 10px 0;
		margin-bottom: 10px;
		border-radius: 2px;
		display: flex;
		flex-wrap: wrap;
	}
	.line {
		height: 36px;
		margin: 0 0 10px 18px;
		border-left: 1px solid #e5e6eb !important;
		padding: 0 0 0 18px;
	}
	.answer-bot {
		padding: 16px;
		border-radius: 2px;
		background-color: #ffffff;
		.bot-title {
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #000000;
		}
	}
</style>
